<template>
    <!-- 尾部 -->
   <div class="footerTotal">
     <!-- 更换icon激活后的图标地址在下面css -->
          <router-link to="/index" class="index"  active-class="index-icon active">
          <!-- 未激活的icon图标地址 -->
            <img src="~@/assets/sy_02.png">
            <span class="shouye">首页</span>
          </router-link>

           <router-link to="/projects" class="project" active-class="project-icon active">
            <img src="~@/assets/xm_02.png" />
            <span>项目</span>
           </router-link>

          <router-link to="/zgz" class="zg_user" active-class="rencai-icon active">
              <img src="~@/assets/zgz_02.png"/>
              <span>筑功者</span>
           </router-link>

          <router-link to="/user" class="zgz" active-class="wode-icon active">
             <img src="~@/assets/wd_02.png"/>
             <span>我的</span>
           </router-link>

          <div class="menu-special"> 
            <div class="icon-jia-border">
            <svg class="icon icon-jia" aria-hidden="true" @click.prevent="fabu">
              <use xlink:href="#icon-cuowu"></use>
            </svg>
            </div>
            <span class="jia-text">发布</span>
          </div>
          <!-- 编辑按钮弹出层 -->
         
          <div class="bianji" @click="goRelease">
            <svg class="icon icon-bianji" aria-hidden="true">
              <use xlink:href="#icon-fabuxiangmu"></use>
            </svg>
            <span>项目</span>
          </div>

          <div class="position" @click="goRelease">
            <svg class="icon icon-po" aria-hidden="true" >
              <use xlink:href="#icon-drxx12-copy"></use>
            </svg>
            <span>职位</span>
          </div>
          <!-- 遮罩层
          <div class="hidden" @touchstart.prevent="close"></div> -->
        </div>
</template>

<script>
export default {
  name: "footerTotal",
  data() {
    return {
      flag: false
    };
  },
  methods: {
    fabu() {
      this.flag = !this.flag;
      if (this.flag == true) {
        $(".hidden").show();
        $(".icon-jia").addClass("rotate");
        $(".jia-text").css("color", "#3887fe");
        $(".bianji").show();
        $(".position").show();
        $(".bianji").attr("class", "bianji animated zoomLeftInUp");
        $(".position").attr("class", "position animated zoomRightInUp");
      } else {
        $(".icon-jia").removeClass("rotate");
        $(".jia-text").css("color", "#666666");
        $(".bianji").attr("class", "bianji animated zoomLeftOutDown");
        $(".position").attr("class", "position animated zoomRightOutDown");
      }
    },
    close() {
      this.flag = false;
      $("body").css("overflow-y", "auto");
      $(".jia-text").css("color", "#3887fe");
      $(".hidden").hide();
      $(".icon-jia").removeClass("rotate");
      $(".bianji").attr("class", "bianji animated zoomLeftOutDown");
      $(".position").attr("class", "position animated zoomRightOutDown");
    },
    // 前往发布项目页面
    goRelease(){
      this.$router.push('/user/resume')
    }
  }
};
</script>

<style lang="scss" scoped type="text/css">
.footerTotal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 65px;
  background: white;
  display: flex;
  align-items: center;
  border-top: 2px solid #eeeeee;
 
  padding-top: 5px;
}

.index {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666666;
}
.zg_user {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666666;
}
.zgz {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666666;
}
.project {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666666;
  margin-right: 72px;
}

.footerTotal > a > span {
  font-size: 14px;
}
.footerTotal > a > img {
  width: 27%;
  height: 27%;
}
.zg_user > img {
  width: 40% !important;
  height: 40% !important;
}
.menu-special {
  position: absolute;
  width: 48px !important;
  height: 48px;
  border-radius: 24px;
  background: white;
  left: 50%;
  margin-left: -24px;
  top: -21px;
  border-top: 2px solid #eeeeee;
  z-index: 10000;
}
.icon-jia {
  font-size: 22px !important;
  color: white;
  display: inline-block;
  margin-top: 7px;
}

.icon-jia-border {
  position: absolute;
  left: 4.2px;
  top: 3.8px;
  width: 38.6px;
  height: 38.6px;
  border-radius: 19.3px;
  border: 1px solid transparent;
  background: #3887fe;
  text-align: center;
}

.shouye {
  font-size: 10px;
  // margin-left: 2px;
}
// 更换激活图片url位置在这里哦
.index-icon {
  background: url("~@/assets/sy_01.png") no-repeat 31px 0px;
  background-size: 27%;
}
.project-icon {
  background: url("~@/assets/xm_01.png") no-repeat center 0px;
  background-size: 27%;
}
.wode-icon {
  background: url("~@/assets/wd_01.png") no-repeat center 0px;
  background-size: 27%;
}
.rencai-icon {
  background: url("~@/assets/zgz_01.png") no-repeat center 0px;
  background-size: 40%;
}

.rotate {
  transform: rotate(45deg);
  transition: all 0.5s ease-in;
}
.jia-text {
  position: absolute;
  top: 47.5px;
  left: 10px;
  font-size: 14px;
  color: #666666;
}
.bianji {
  position: absolute;
  width: 44px !important;
  height: 44px;
  background: #fd4f00;
  border-radius: 22px;
  left: 150px;
  top: -57px;
  display: none;
  z-index: 9999;
  span{
    color:#ffffff;
    display: block;
    margin-left: 10px;
  }
}
.position {
  position: absolute;
  width: 44px !important;
  height: 44px;
  background: #fd4f00;
  border-radius: 22px;
  left: 220px;
  top: -57px;
  display: none;
  z-index: 2019;
  span{
    color:#ffffff;
    display: block;
    margin-left: 10px;
  }
}
.icon-bianji {
  font-size: 20px;
  color: white;
  display: block;
  margin-left: 13px;
  margin-top: 4px;
 
}
.icon-po {
  font-size: 20px;
  color: pink;
  display: block;
  margin-left: 13px;
  margin-top: 4px;
}
.router-link-exact-active > span {
  color: #3887fe;
}
.router-link-exact-active > img {
  visibility: hidden;
}
.project>span{
  margin-left:2px;
}
</style>
